<template>
  <!-- 数据大屏容器：全屏自适应 -->
  <div class="data-screen">
    <!-- 顶部标题栏 -->
    <div class="screen-header">
      <h1>校园文化数据可视化大屏</h1>
      <div class="time">{{ currentTime }}</div>
    </div>

    <!-- 核心数据卡片区（3列布局） -->
    <div class="card-container">
      <div class="data-card">
        <div class="card-title">今日访问量</div>
        <div class="card-value">{{ visitCount }}</div>
        <!-- <div class="card-trend">较昨日 +12.5%</div> -->
      </div>
      <div class="data-card">
        <div class="card-title">累计新闻数</div>
        <div class="card-value">{{ newsCount }}</div>
        <!-- <div class="card-trend">较上月 +8.3%</div> -->
      </div>
      <div class="data-card">
        <div class="card-title">累计通知数</div>
        <div class="card-value">{{ dealAmount }}</div>
        <!-- <div class="card-trend">较昨日 +5.7%</div> -->
      </div>
    </div>

    <!-- 图表区（2行2列布局） -->
    <div class="chart-container">
      <!-- 折线图：访问量趋势 -->
      <div class="chart-card">
        <div class="chart-title">7日访问量趋势</div>
        <div id="line-chart" class="chart-box"></div>
      </div>
      <!-- 柱状图：各渠道转化 -->
      <div class="chart-card">
        <div class="chart-title">各类新闻量</div>
        <div id="bar-chart" class="chart-box"></div>
      </div>
      <!-- 饼图：用户分布 -->
      <div class="chart-card">
        <div class="chart-title">社团通知分布</div>
        <div id="pie-chart" class="chart-box"></div>
      </div>
      <!-- 表格：最新订单 -->
      <div class="chart-card">
        <div class="chart-title">失物列表</div>
        <div class="table-box">
          <table>
            <thead>
              <tr>
                <th>失物名</th>
                <th>丢失时间</th>
                <th>联系方式</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in orderList" :key="item.id">
                <td>{{ item.object }}</td>
                <td>{{ item.lostdate }}</td>
                <td>{{ item.phone }}</td>
                <td :class="`status ${item.status}`">{{ item.statusText }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// 1. 核心数据（可替换为接口请求数据）
const visitCount = ref('143,311') // 今日访问量
const newsCount = ref('896,321') // 累计新闻数
const dealAmount = ref('368,925') // 通知数
const currentTime = ref('') // 当前时间
// object失物名 lostdate时间 phone电话 success 已找回 pending未找回
const orderList = ref([
  { id: 1, object: '手机', lostdate: '2025-10-8', phone: 12994671222, status: 'success', statusText: '已找回' },
  { id: 2, object: '雨伞', lostdate: '2025-9-8', phone: 13289934653, status: 'pending', statusText: '未找回' },
  { id: 3, object: '高数书', lostdate: '2025-11-2', phone: 13425994432, status: 'success', statusText: '已找回' },
  { id: 4, object: '篮球', lostdate: '2025-11-3', phone: 12259933123, status: 'pending', statusText: '未找回' },
])

// 2. 初始化时间显示
const updateTime = () => {
  const date = new Date()
  currentTime.value = date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 3. 初始化ECharts图表
let lineChart, barChart, pieChart
const initCharts = () => {
  // 折线图：7日访问量趋势
  lineChart = echarts.init(document.getElementById('line-chart'))
  lineChart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '10%', right: '5%', bottom: '15%' },
    xAxis: {
      type: 'category',
      data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#444' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#444' } },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [{
      name: '访问量',
      type: 'line',
      data: [89230, 95680, 102350, 98760, 115420, 121890, 128543],
      lineStyle: { color: '#409EFF', width: 3 },
      itemStyle: { color: '#409EFF', borderRadius: 5 },
      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' }, { offset: 1, color: 'rgba(64, 158, 255, 0)' }]) },
      smooth: true
    }]
  })

  // 柱状图：各类新闻量
  barChart = echarts.init(document.getElementById('bar-chart'))
  barChart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '10%', right: '5%', bottom: '15%' },
    xAxis: {
      type: 'category',
      data: ['校园要闻类', '学术科研类', '校园活动类', '校园生活类', '校园安全类'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#444' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#444' } },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [{
      name: '新闻量',
      type: 'bar',
      data: [32500, 48900, 29800, 18700, 12300],
      itemStyle: { 
        color: (params) => {
          const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
          return colors[params.dataIndex]
        },
        borderRadius: 6
      },
      barWidth: '40%'
    }]
  })

  // 饼图：社团通知分布
  pieChart = echarts.init(document.getElementById('pie-chart'))
  pieChart.setOption({
    tooltip: { trigger: 'item' },
    legend: {
      bottom: 10,
      textStyle: { color: '#fff' }
    },
    series: [{
      name: '社团通知分布',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '40%'],
      avoidLabelOverlap: false,
      label: { show: false },
      labelLine: { show: false },
      data: [
        { value: 35, name: '英语社' },
        { value: 25, name: '机房' },
        { value: 20, name: '学生会' },
        { value: 10, name: '心联' },
        { value: 10, name: '其他' }
      ],
      itemStyle: {
        color: (params) => {
          const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
          return colors[params.dataIndex]
        }
      }
    }]
  })
}

// 4. 监听窗口resize，图表自适应
const handleResize = () => {
  lineChart?.resize()
  barChart?.resize()
  pieChart?.resize()
}

// 5. 生命周期钩子
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000) // 每秒更新时间
  initCharts()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  clearInterval(updateTime)
  window.removeEventListener('resize', handleResize)
  lineChart?.dispose()
  barChart?.dispose()
  pieChart?.dispose()
})
</script>

<style scoped>
/* 大屏整体样式：深色科技风 */
.data-screen {
  width: 100vw;
  height: 100vh;
  background-color: #0f172a;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 顶部标题栏 */
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.screen-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #409EFF;
}
.screen-header .time {
  font-size: 16px;
  color: #94a3b8;
}

/* 数据卡片区 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.data-card {
  background-color: #1e293b;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #334155;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.card-title {
  font-size: 16px;
  color: #94a3b8;
  margin-bottom: 10px;
}
.card-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #fff;
}
.card-trend {
  font-size: 14px;
  color: #22c55e;
}

/* 图表区 */
.chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  height: calc(100vh - 220px);
}
.chart-card {
  background-color: #1e293b;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #334155;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.chart-title {
  font-size: 16px;
  color: #94a3b8;
  margin-bottom: 10px;
}
.chart-box {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* 表格样式 */
.table-box {
  flex: 1;
  overflow-y: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
th {
  font-size: 14px;
  color: #94a3b8;
  padding: 10px 0;
  border-bottom: 1px solid #334155;
}
td {
  font-size: 14px;
  color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid #334155;
}
.status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.status.success {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.status.pending {
  background-color: rgba(250, 204, 21, 0.2);
  color: #facc15;
}
/* .status.shipping {
  background-color: rgba(64, 158, 255, 0.2);
  color: #409EFF;
} */

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
</style>